<template>
    <div>
        <MyHeader title="购物车案例" background="red" color="yellow"></MyHeader>
        <div class="main">
            <MyGoods v-for="item in list" :key="item.id" :item="item"></MyGoods>
        </div>
        <MyFooter :list="list" @changAll="changAllFn"></MyFooter>
    </div>
</template>

<script>
import MyHeader from './components/MyHeader'
import MyGoods from './components/MyGoods'
import MyFooter from './components/MyFooter'
export default {
    data() {
        return {
            list: [],
        }
    },
    components: {
        MyHeader,
        MyGoods,
        MyFooter,
    },
    created() {
        this.$axios({
            url: '/api/cart',
        }).then((res) => {
            this.list = res.data.list
        })
    },
    methods: {
        changAllFn(val) {
            this.list.forEach((item) => (item.goods_state = val))
        },
    },
}
</script>

<style>
.main {
    padding-top: 45px;
    padding-bottom: 50px;
}
</style>
